<template>
  <div class="fit no-wrap column rounded-borders overflow-hidden">
    <TopTools v-if="!nonHeader" v-model="mapMode" v-model:monitorInfo="monitorInfo" :openedMap="openedMap"></TopTools>
    <div class="making-map-page col row no-wrap">
      <template v-if="!nonMaps && mapMode === 'preview'">
        <LeftMaps v-model="openedMap" :maps="maps" readonly></LeftMaps>
      </template>
      <MapMonitoring ref="Canvas" v-model:loading="loading" v-model:refreshMap="refreshMap" :alarmAMRs="alarmAMRs"
                     :mapJSON="mapJSON" :mapMode="mapMode" :monitorInfo="monitorInfo" :openedMap="openedMap"
                     :source="source" @refreshHeatMapAreas="getHeatMapAreas"></MapMonitoring>
    </div>
  </div>
  <q-inner-loading :showing="loading">
    <q-spinner-ios color="primary" size="3rem" />
  </q-inner-loading>
</template>

<script setup>
import { postAPI } from 'src/api'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { packagePoints, setPackagePoints } from 'src/views/MapCore/MapGlobal/utils/PackagePoints.js'
import TopTools from 'src/views/MapCore/Monitoring/TopTools.vue'
import MapMonitoring from 'src/views/MapCore/Monitoring/Index.vue'
import { ref, watch } from 'vue'
import LeftMaps from 'src/views/MapCore/MapGlobal/Tools/LeftMaps.vue'
import { unzip } from 'src/utils/PakoJson.js'

const props = defineProps({
  readonly: Boolean, classes: String, source: String, refreshHeatMap: Boolean, injectHeatMapSearch: Object,
  nonHeader: Boolean, nonMaps: Boolean, assignedMap: Object, alarmAMRs: Array, openedMapCode: String,
  heatMapUri: { type: String, default: '/yfagv/api/agvWarn/queryWarnAreaStat' }
})
const emits = defineEmits(['update:refreshHeatMap', 'update:openedMapCode'])

const maps = ref([])
const mapJSON = ref('')
const Canvas = ref(null)
const openedMap = ref({})
const loading = ref(false)
const refreshMap = ref(false)
const mapMode = ref('preview')
const monitorInfo = ref({ status: [], chargeList: [], alarmAreas: [] })
watch(() => openedMap.value?.mapGroundCode, mapGroundCode => getMapJSON(mapGroundCode))
watch(() => props.refreshHeatMap, val => {
  if (!val) return
  getHeatMapAreas()
  emits('update:refreshHeatMap', false)
})
const clearOpenedMap = () => {
  mapJSON.value = ''
  openedMap.value = {}
  refreshMap.value = true
}
const getMapsAndPoints = () => {
  loading.value = true
  postAPI('/yfagv/api/agvMap/findBasicDataAndMaps', { pageSize: '-1' }, data => {
    setPackagePoints(data.pointCfg || [])
    maps.value = data.mapInfos || []
    if (!maps.value.length) return (loading.value = false)
    if (!openedMap.value.mapGroundCode) openedMap.value = maps.value[0] || {}
    else loading.value = false
  }, () => {
    maps.value = []
    loading.value = false
    setPackagePoints([])
  })
}
const getHeatMapAreas = () => {
  const params = props.injectHeatMapSearch || {}
  params.mapCode = openedMap.value.mapGroundCode
  emits('update:openedMapCode', params.mapCode)
  loading.value = true
  postAPI(props.heatMapUri, params, data => {
    Canvas.value && Canvas.value.refreshHeatMapAreas(data)
  }, () => (loading.value = false))
}
const getMapJSON = (mapGroundCode) => {
  if (!mapGroundCode) return clearOpenedMap()
  loading.value = true
  refreshMap.value = false
  postAPI('/yfagv/api/mainBusinessMap/queryMapDetailGzip', { mapGroundCode }, data => {
    mapJSON.value = unzip(data?.baseMapDataGzip || '')
    refreshMap.value = true
    if (!mapJSON.value) loading.value = false
  }, () => (loading.value = false))
}
const getPackagePoints = done => {
  loading.value = true
  if (!packagePoints.value.length) {
    getRemoteData('station_package_type', '/yfagv/api/mapPointElementCfg/list').then(data => {
      setPackagePoints(data || [])
      done && done()
    })
  } else done && done()
}
const formatAssignedMap = () => {
  const { areaCode, areaX, areaY, areaWidth, areaHeight, mapGroundCode, mapName } = props.assignedMap || {}
  openedMap.value = { mapGroundCode, mapName, areaX, areaY, areaWidth, areaHeight, areaCode, isFocusArea: !!areaCode }
}
watch(() => props.assignedMap?.mapGroundCode, mapGroundCode => {
  if (!props.assignedMap) return
  if (!mapGroundCode) return clearOpenedMap()
  getPackagePoints(formatAssignedMap)
}, { immediate: true })
if (!props.assignedMap) getMapsAndPoints()
</script>